<template>
  <!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in carouselChartData" :key="item.id">
      <img :src="item.pic_url" alt="">
    </van-swipe-item>
  </van-swipe>
  <!-- 商品分区 -->
    <!-- 热销商品 -->
    <Goods :goodsList="hotGoods" title="热销商品"></Goods>
    <!-- 最新上架 -->
    <Goods :goodsList="newGoods" title="最新商品"></Goods>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCarouselChartData,getGoodsList } from '@/api/home'

// 轮播图数据
const carouselChartData = ref([])

// 热销商品
const hotGoods=ref([])
// 最新商品
const newGoods=ref([])



// 生命周期  组件挂载完成
onMounted(async () => {
  // 获取 轮播图
  let res=await getCarouselChartData({ limit: '10', page: '1' })
  carouselChartData.value=res.data.list
  // 获取热卖商品列表
  hotGoods.value=(await getGoodsList({limit: '10', page: '1',sort:'sale' })).data.list
  // 获取最新商品列表
  newGoods.value=(await getGoodsList({limit: '10', page: '1' ,sort:'recent'})).data.list
})





</script>

<style lang="scss">
.my-swipe .van-swipe-item {

  img {
    width: 100%;
  }
}
</style>